<template>
	<view>
		<!-- 回收价格表格 -->
		<u-table class="u-m-t-30" padding="0 0">
			<u-tr>
				<u-th class="u-flex-2"><text class="th">品类</text></u-th>
				<u-th><text class="th">价格</text></u-th>
			</u-tr>
			<u-tr>
				<u-th><text class="th">类型</text></u-th>
				<u-th><text class="th">小类</text></u-th>
				<u-th><text class="th">上门价</text></u-th>
				<!-- <u-th><text class="th">站点价</text></u-th> -->
			</u-tr>
			<template v-for="(item,index) in tableList">
				<u-tr :key="index">
					<u-td class="u-flex-1">{{item.typenames}}</u-td>
					<u-td class="u-flex-2">
						<view class="table-th-middle" v-for="(cell,i) in item.product" :key="i">
							<view class="u-flex">
								<view class="u-flex-1 smallname">{{cell.name}}</view>
								<view class="u-flex-1 userPrice">{{cell.onsiteprice.toFixed(2)}}元/<text class="u-font-24">{{cell.isweighing == false?'件':'KG'}}</text></view>
								<!-- <view class="u-flex-1 shopPrice">--</view> -->
							</view>
						</view>
					</u-td>
				</u-tr>
			</template>
		</u-table>
		<view class="fixed u-p-30 u-flex">
			<view class="u-flex-1 u-p-r-30">
				<u-button type="primary" @click="online">预约上门收</u-button>
			</view>
			<view class="u-flex-1">
				<u-button type="primary" @click="goShop">自送网点收</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"price-table",
		data() {
			return {
				tableList: [
					// {
					// 	name: '废纸',
					// 	Product:[
					// 		{
					// 			name: '黄纸',
					// 			userprice: 0.8,
					// 			fitprice: 1.10
					// 		}
					// 	]
					// },
				]
			};
		},
		mounted() {
			this.getData()
		},
		methods:{
			getData(){
				this.$u.get('/Waste/Price/TodayPrice?cityId=2').then((res)=>{
					console.log('TodayPrice',res)
					this.tableList = res
				})
			},
			online(){
				this.$emit('online')
			},
			goShop(){
				this.$emit('shop')
			}
		}
	}
</script>

<style lang="scss" scoped>
	.th{
		padding: 10rpx;
		height: 70rpx;
		display: flex;
		justify-content: center;
		box-sizing: border-box;
		align-items: center;
		font-size: 24rpx;
	}
	.table-th-middle{
		// width: 270rpx;
		padding: 10rpx;
		flex: auto!important;
		padding: 0!important;
		.u-flex{
			align-items: center;
		}
		.smallname,.userPrice,.shopPrice{
			padding: 10rpx;
			border-right: 1px solid #e4e7ed;
			border-bottom: 1px solid #e4e7ed;
			height: 70rpx;
			display: flex;
			justify-content: center;
			box-sizing: border-box;
			align-items: center;
			font-size: 24rpx;
		}
		.userPrice,.shopPrice{
			font-weight: bold;
			font-size: 28rpx;
		}
		.shopPrice{
			border-right: 0;
		}
		&:last-child{
			.smallname,.userPrice,.shopPrice{
				border-bottom: 0;
			}
		}
	}
	.fixed{
		position: sticky;
		bottom: 0;
		background-color: #fff;
		box-shadow: 0px -5px 5px #f3f3f3;
	}
</style>